<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查看作业详情</title>
    <link rel="stylesheet" type="text/css"
          href="../bootstrap/bootstrap.4.1.0.css">
    <script src="../bootstrap/jquery.3.2.1.min.js"></script>
    <script src="../bootstrap/popper.12.5.min.js"></script>
    <script src="../bootstrap/bootstrap.4.1.0.min.js"></script>
    <script src="../layui/layer/layer.js"></script>
    <script src="../vue/Vue.js"></script>
    <script src="../vue/axios.js"></script>
    <style>
        .vacancy{
            border:none;//去除边框
            border-radius:0;
            border-bottom:#8D8D8D 1px solid;
            box-shadow: 0px 0px 0px 0px;//去除阴影
        }
    </style>
</head>
<body>
    <div id="app" class="container">
        <div v-if="questions!=null">
            <div v-for="(question,index) in questions">
                <div v-if="question.paperQuestionBank==1">
                    <label>{{question.paperQuestionNumber}}.</label>
                    <label>
                        {{question.paperDetailQuestion.selectTpoic}}({{question.paperDetailQuestion.selectPoint}}分)(   )<br>
                    </label>
                    <div>
                        A. {{question.paperDetailQuestion.selectOptionsa}}<br>
                        B. {{question.paperDetailQuestion.selectOptionsb}}<br>
                        C. {{question.paperDetailQuestion.selectOptionsc}}<br>
                        D. {{question.paperDetailQuestion.selectOptionsd}}<br>
                    </div>
                </div><br>
                <div v-if="question.paperQuestionBank==2" class="form-group">
                    <label>{{question.paperQuestionNumber}}.</label>
                    <label>
                        {{question.paperDetailQuestion.vacancyTopic}}
                    </label><br>
                    <div>
                       <input type="text" class="vacancy form-control">
                    </div>
                </div><br>
                <div v-if="question.paperQuestionBank==3">
                    <label>{{question.paperQuestionNumber}}.</label>
                    <label>
                        {{question.paperDetailQuestion.materialReading}}
                    </label><br>
                    <div v-if="question.paperDetailQuestion.selectBanks!=null">
                        <div v-for="(select,index) in question.paperDetailQuestion.selectBanks">
                            <label>
                                    {{select.selectTpoic}}(          )<br>
                            </label>
                            <div>
                                    A. {{select.selectOptionsa}}<br>
                                    B. {{select.selectOptionsb}}<br>
                                    C. {{select.selectOptionsc}}<br>
                                    D. {{select.selectOptionsd}}<br>
                            </div><br>
                        </div><br>
                    </div>
                    <div v-if="question.paperDetailQuestion.vacancyBanks!=null">
                        <div v-for="(vacancy,index) in question.paperDetailQuestion.vacancyBanks">
                            <label>
                                    {{vacancy.vacancyTopic}}
                            </label><br>
                            <div>
                                    <input type="text" class="vacancy form-control">
                            </div><br>
                        </div>

                    </div>
                    <div v-if="question.paperDetailQuestion.judgeBanks!=null">
                        <div v-for="(judge,index) in question.paperDetailQuestion.judgeBanks">
                                {{judge.judgeTopic}}
                            </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            (&nbsp;&nbsp;&nbsp;&nbsp;)
                        </div>
                    </div>
                </div><br>
                <div v-if="question.paperQuestionBank==4">
                    <label>
                        {{question.paperQuestionNumber}}({{question.paperDetailQuestion.clozePoint}}分).
                        {{question.paperDetailQuestion.clozeTopic}}<br>
                    </label>
                    <div v-for="(clozeSelect,index) in question.paperDetailQuestion.clozeSelects">
                        {{index+1}}.(&nbsp;&nbsp;&nbsp;&nbsp;)&nbsp;&nbsp;&nbsp;&nbsp;
                        A. {{clozeSelect.selectOptionsa}}&nbsp;&nbsp;&nbsp;&nbsp;
                        B. {{clozeSelect.selectOptionsb}}&nbsp;&nbsp;&nbsp;&nbsp;
                        C. {{clozeSelect.selectOptionsc}}&nbsp;&nbsp;&nbsp;&nbsp;
                        D. {{clozeSelect.selectOptionsd}}&nbsp;&nbsp;&nbsp;&nbsp;
                    </div>
                </div><br>
                <div v-if="question.paperQuestionBank==6">
                    <label>{{question.paperQuestionNumber}}.</label>
                    <label>
                        {{question.paperDetailQuestion.judgeTopic}}
                    </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    (&nbsp;&nbsp;&nbsp;&nbsp;)

                </div><br>
                <div v-if="question.paperQuestionBank==7">
                    <h6>{{question.paperQuestionNumber}}.作文，根据下列材料写作：</h6>
                    <label>
                        {{question.paperDetailQuestion.writerTopic}}
                    </label><br>
                    <textarea>
                    </textarea>

                </div><br>
            </div>
        </div>
    </div>
<script>
    new Vue({
        el:"#app",
        data:{
            questions:[],
        },
        mounted(){
            var paperid = window.location.href.split("=")[1];
            console.log(paperid);
            axios.get("../task/getRemotePaper/"+paperid).then(
                res => {
                    if (res.data.code===200){
                        this.questions = res.data.data.paperQuestions;
                        console.log(this.questions);
                        for (const question of this.questions) {
                            console.log(question);
                        }
                    }else{
                        layer.alert("网络繁忙，请稍后再试");
                    }
                }
            )
        },
    })
</script>
</body>
</html>